<template>
  <div>

    <h4>基本信息</h4>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="text-align: left;font-weight: bolder">
      <el-form-item label="用户名称" >
        <el-input  v-model="searchForm.username" placeholder="请输入用户名称" size="small"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="searchForm.phone" placeholder="请输入手机号码" size="small"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="用户状态" size="small">
          <el-option :value="3" label="请选择"></el-option>
          <el-option :value="1" label="正常"></el-option>
          <el-option :value="0" label="停用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getSearchForm" size="mini" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="openSave" size="mini" icon="el-icon-plus">添加</el-button>
      </el-form-item>
    </el-form>
    <h4>用户信息</h4>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="用户编号">
      </el-table-column>
      <el-table-column
          prop="username"
          label="登录名">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>

      <el-table-column
          prop="deptName"
          label="部门">
      </el-table-column>

      <el-table-column
          prop="phone"
          label="手机号">
      </el-table-column>

      <el-table-column
          label="状态">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="updateStatus(scope.row)"
              :active-value="1"
              :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column
          prop="createdAt"
          label="创建时间">
      </el-table-column>

      <el-table-column
          label="操作"
          align="center"
          width="260"
          class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="openSave(scope.row)"
          >修改
          </el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
          >删除
          </el-button>

          <el-button
              size="mini"
              type="text"
              icon="el-icon-s-custom"
              @click="handleRoles(scope.row)"
          >分配角色
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageNum"
        :page-sizes="[5,10,30,40]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchForm.total">
    </el-pagination>
    <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        width="45%">

      <el-form :model="saveFrom" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col span="10">
            <el-form-item label="登录名称" prop="username">
              <el-input v-model="saveFrom.username" placeholder="请输入用户昵称"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="归属部门">
              <el-select v-model="saveFrom.departmentId" placeholder="请选择归属部门">
                <el-option :label="dept.name" :value="dept.id" :key="dept.id" v-for="dept in deptsData"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="10">
            <el-form-item label="手机号码">
              <el-input v-model="saveFrom.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="邮箱">
              <el-input v-model="saveFrom.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="10">
            <el-form-item label="用户昵称" prop="name">
              <el-input v-model="saveFrom.name" placeholder="请输入用户昵称"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="用户密码" prop="password">
              <el-input v-model="saveFrom.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="10">
            <el-form-item label="岗位">
              <el-select v-model="saveFrom.positionId" placeholder="请选择归属部门">
                <el-option :label="dept.name" :value="dept.id" :key="dept.id" v-for="dept in positionsData"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="角色">
              <el-radio-group v-model="saveFrom.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="10">
            <el-form-item label="地址">
              <el-input v-model="saveFrom.address" placeholder="请输入地址"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveEmp">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="分配角色"
        :visible.sync="dialogRole"
        width="30%"
    >

      <el-tree
          ref="checkedIds"
          :data="treeData"
          :show-checkbox="true"
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="defaultCheckIds"
          :props="defaultProps">
      </el-tree>
<p style="text-align: left;color: red">注意:每次只能分每一个角色</p>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogRole = false">取 消</el-button>
    <el-button type="primary" @click="fenRoles">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>


import {
  search,
  updateStatus,
  handleDelete,
  getDepts,
  getPositions,
  saveEmp,
  handleUpdate,
  getRoles,
  getRoleIds,
  fenRole
} from "@/api/emp";

export default {
  name: "UsersView",
  data() {
    return {

      saveFrom: {
        username: '',
        password: '',
        userId: '',
        status: 1,
        name: '',
        email: '',
        phone: '',
        address: '',
        departmentId: '',
        positionId: '',
      },
      dialogVisible: false,
      dialogRole: false,
      searchForm: {
        username: '',
        phone: '',
        status: 3,
        pageNum: 1,
        pageSize: 5,
        total: '',
        pages: 1
      },
      tableData: [],
      treeData: [{
        id: 0,
        name: '角色名称',
        children: []
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      checkedIds: '',
      defaultCheckIds: [],
      deptsData: [],
      positionsData: [],
      userId: '',

    };
  },
  created() {
    this.getPage()
    this.getDepts()
    this.getPositions()
  },
  methods: {
    fenRoles() {
      let that = this
      var childsIds = this.$refs.checkedIds.getCheckedKeys(true)//为true时子节点全部选中也不会拿到父节点
      if (childsIds.length>1){
        that.$message.success('每次只能分配一个角色')
        return
      }

      fenRole(childsIds, that.userId).then(function (data) {
        if (data.code == 200) {
          that.$message.success(data.mess)
        } else {
          that.$message.error(data.mess)
        }
        that.dialogRole = false
      })
    },
    handleRoles(row) {
      let that = this
      that.userId = row.userId
      that.dialogRole = true
      getRoles().then(function (data) {
        if (data.code == 200) {
          that.treeData[0].children = data.data
          that.defaultCheckIds = []
          getRoleIds(row.userId).then(function (data) {
            that.defaultCheckIds = data.data
          })
        }

      })
    },
    saveEmp() {

      let that = this
      if (that.saveFrom.id != null && that.saveFrom.id != '') {
        handleUpdate(that.saveFrom).then(function (data) {
          if (data.code == 200) {
            that.$message.success(data.mess)
            that.getPage()

          } else {
            that.$message.error(data.mess)
          }
          that.dialogVisible = false
        })
      } else {
        saveEmp(that.saveFrom).then(function (data) {

          if (data.code == 200) {
            that.$message.success(data.mess)
            that.getPage()
          } else {
            that.$message.error(data.mess)
          }
          that.dialogVisible = false
        })
      }
      that.dialogVisible = false
    },
    openSave(row) {
      let that = this
      this.dialogVisible = true
      if (row.id != null && row.id != '') {
        that.saveFrom = row
      } else {
        this.saveFrom = {}
      }

    },
    handleDelete(row) {
      let that = this
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        handleDelete(row.userId).then(function (data) {
          if (data.code == 200) {
            that.$message.success(data.mess)
            that.getPage()
          } else {
            that.$message.error(data.mess)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    updateStatus(row) {
      let that = this
      updateStatus(row).then(function (data) {
        if (data.code == 200) {
          that.$message.success(data.mess)
          that.getPage()
        } else {
          that.$message.error(data.mess)
        }
      })
    },
    handleSizeChange(size) {
      let that = this
      that.searchForm.pageSize = size
      that.getPage()
    },
    handleCurrentChange(num) {
      let that = this
      that.searchForm.pageNum = num
      that.getPage()
    },
    getSearchForm() {
      this.searchForm.pageNum = 1
      this.getPage()
    },
    getDepts() {
      let that = this
      getDepts().then(function (data) {
        that.deptsData = data.data
      })
    },
    getPage() {
      let that = this
      search(that.searchForm).then(function (data) {

        if (data.code == 200) {
          that.tableData = data.data.records
          that.searchForm.pages = data.data.pages
          that.searchForm.total = data.data.total
          that.searchForm.pageSize = data.data.size
          that.searchForm.pageNum = data.data.current
        }
      })
    },
    // getRoles(){
    //
    // },
    getPositions() {
      let that = this
      getPositions().then(function (data) {
        that.positionsData = data.data
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
